﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TopMenu.ascx.cs" Inherits="Indochinaodyssey.UserControl.NavigatorMenu.TopMenu" %>
<style type="text/css">
    ul#topnav
    {
        margin: 0;
        padding: 0;
        float: left;
        width: 970px;
        list-style: none;
        position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
        font-size: 1.2em;
        background: url(Style\Images\topnav_stretch.gif) repeat-x;
    }
    ul#topnav li
    {
        float: left;
        margin: 0;
        padding: 0;
        border-right: 1px solid #555; /*--Divider for each parent level links--*/
    }
    ul#topnav li a
    {
        padding: 10px 15px;
        display: block;
        color: #f0f0f0;
        text-decoration: none;
    }
    ul#topnav li:hover
    {
        background: #1376c9 url(Style\Images\topnav_active.gif) repeat-x;
    }
    ul#topnav li span
    {
        float: left;
        padding: 15px 0;
        position: absolute;
        left: 0;
        top: 35px;
        display: none; /*--Hide by default--*/
        width: 970px;
        background: #1376c9;
        color: #fff; /*--Bottom right rounded corner--*/
        -moz-border-radius-bottomright: 5px;
        -khtml-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/
        -moz-border-radius-bottomleft: 5px;
        -khtml-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
    }
    ul#topnav li:hover span
    {
        display: block;
    }
    /*--Show subnav on hover--*/
    ul#topnav li span a
    {
        display: inline;
    }
    /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
    ul#topnav li span a:hover
    {
        text-decoration: underline;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {

        $("ul#topnav li").hover(function () { //Hover over event on list item
            $(this).css({ 'background': '#1376c9 url(Style\Images\topnav_active.gif) repeat-x' }); //Add background color and image on hovered list item
            $(this).find("span").show(); //Show the subnav
        }, function () { //on hover out...
            $(this).css({ 'background': 'none' }); //Ditch the background
            $(this).find("span").hide(); //Hide the subnav
        });

    });
</script>
<ul id="topnav">
    <asp:Label ID="lblTopMenu" runat="server"></asp:Label>
</ul>
